<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="../EXT4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="../css/style.css" />
<script type="text/javascript" src="../EXT4/ext-all.js"></script>
<script type="text/javascript" src="../script/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.namespace('role');
Ext.onReady(function() {

	Ext.QuickTips.init();
	
	Ext.define('Role', { 
        extend: 'Ext.data.Model', 
        fields: ['id','roleName'] 
    });
	
	var role_store = Ext.create('Ext.data.Store', {
		model: 'Role', 
        autoLoad: true,
        pageSize: 10,
        proxy: { 
            type: 'ajax', 
            url: '../service/role_allrole',
            reader: { 
                type: 'json', 
                root: 'root'
            }
        }
	});
	
	Ext.create('Ext.grid.Panel',{
	    valueField: 'id',
	    renderTo: 'rolemng',
	    width: '50%',
	    id: 'role_grid',
	    tbar: ['角色名:',{
	    	xtype:'textfield',
	    	width:'35%',
	    	id: 'rolename'
	    },{
	    	xtype:'button',
	    	text: '添加',
	    	handler: function() {
	    		var rolename = Ext.getCmp("rolename").getValue();
	    		Ext.Ajax.request({
					url:'../service/role_add',
					params:{
						'rolename': rolename
					},
					success:function(form, action) {
						role_store.load();
    					Ext.getCmp("rolename").setValue("");
        			}
				});
	    	}
	    }],
	    dockedItems: [{ 
	        xtype: 'pagingtoolbar', 
	        store: role_store,
	        dock: 'bottom', 
	        displayInfo: true 
	     }],
	    columns:[{ 
	    	text: '角色名',  dataIndex: 'roleName', width:'83%'
	    },{
			xtype: 'actioncolumn',
			text: '操作',
			width:'15%',
			items: [{
				icon   : '../EXT4/fam/cross.gif"',
				handler: function(grid, rowIndex, colIndex) {
					var rec = role_store.getAt(rowIndex);
					Ext.MessageBox.confirm("确认","确认删除用户:"+rec.get('roleName'),function(btn){
						if(btn=='yes'){
							Ext.Ajax.request({
								url : '../service/role_delete',
								params : {
									'roleid': rec.get('id')
								},
								success:function(){
									role_store.load();
								}
							});
						}
					});
				}
			}]
		}],
	    store: role_store
	});
	
})
	
</script>
</head>
<body>
<div id="rolemng"></div>
</body>
</html>